<template>
    <div>
      <input v-model="inputValue" placeholder="请输入内容" style="color: brown" />
      <h1 style="color: brown">你输入的内容是: {{ inputValue }}</h1>
      <button
        :disabled="isButtonDisabled"
        @click="handleClick"
        style="color: brown"
      >
        更新
      </button>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  // 定义响应式数据
  const inputValue = ref("");
  const isButtonDisabled = ref(false);
  
  // 处理按钮点击事件
  const handleClick = () => {
    if (inputValue.value.trim() === "") {
      isButtonDisabled.value = true;
      alert("请输入有效的内容");
    } else {
      isButtonDisabled.value = false;
      console.log("你输入的内容是:", inputValue.value);
    }
  };
  </script>
  
  <style scoped>
  button {
    margin-left: 10px;
  }
  </style>